<!DOCTYPE <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Web 存储 Test</title>
    <script>
        //计数不重置
        function clickCounter1() {
            if (typeof (Storage) !== "undefined") {
                if (localStorage.clickcount) {
                    localStorage.clickcount = Number(localStorage.clickcount) + 1;
                }
                else {
                    localStorage.clickcount = 1;
                }
                document.getElementById("result1").innerHTML = " 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
            }
            else {
                document.getElementById("result1").innerHTML = "对不起，您的浏览器不支持 web 存储。";
            }
        }
        //计数重置
        function clickCounter2() {
            if (typeof (Storage) !== "undefined") {
                if (sessionStorage.clickcount) {
                    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
                }
                else {
                    sessionStorage.clickcount = 1;
                }
                document.getElementById("result2").innerHTML = "在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
            }
            else {
                document.getElementById("result2").innerHTML = "抱歉，您的浏览器不支持 web 存储";
            }
        }
        //删除数据
        function del() {
            localStorage.clear();
            alert("删除成功!");
            document.getElementById("result1").innerHTML = "";
            loadAll();
        }
    </script>
</head>

<body>

    <div id="result"></div>
    <script>
        if (typeof (Storage) !== "undefined") {
            localStorage.sitename = "ATU 专业性培训";
            document.getElementById("result").innerHTML = "项目：" + localStorage.sitename;
        }
        else {
            document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
        }
    </script>

    <p><button onclick="clickCounter1()" type="button">计数不重置</button></p>
    <div id="result1"></div>
    <p>点击该按钮查看计数器的增加。</p>
    <p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
    <p><button onclick="del()" type="button">删除数据</button></p>
    <p>点击该按钮后重置计数器。</p>

    <p><button onclick="clickCounter2()" type="button">计数重置</button></p>
    <div id="result2"></div>
    <p>点击该按钮查看计数器的增加。</p>
    <p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>

</body>

</html>